<template>
  <div class="address">
    <div class="header">
      <div @click="$router.push({ name: 'Me' })">
        <a-icon type="left" />
      </div>
      <div>
        <h1>我的地址</h1>
      </div>
    </div>
    <div class="no-address" v-if="commonAddress.length == 0">
      <img src="../assets/imgs/service/地址.png" alt="" />
      <div class="no-address-tips">
        <b>没有地址</b>
      </div>
      <p>你还没有常用地址，快去添加一个吧</p>
    </div>

    <!-- 显示地址 -->
    <div class="common-address" v-else>
      <ul>
        <li v-for="(item, index) in commonAddress" :key="index">
          <p>
            <a-tag color="cyan">{{ labelMap[item.label] }}</a-tag>

            {{ item.address_location }} {{ item.address_doorplate }}
          </p>
          <p>{{ item.user_name }} {{ item.user_phone }}</p>
        </li>
      </ul>
    </div>

    <div class="btn">
      <a-button type="primary" block shape="round" @click="addAddress()">
        <a-icon type="plus" />新建地址
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tempAddress: {
        user_name: "",
        user_phone: "",
        address_location: "",
        address_doorplate: "",
        label: "0",
      },
      labelMap: {},
    };
  },
  computed: {
    //获取commonAddress
    commonAddress() {
      return this.$store.getters.commonAddress;
    },
  },
  methods: {
    addAddress() {
      // 临时数据tempAddress保存到vuex中
      this.$store.dispatch("setTempAddress", this.tempAddress),
        // push到AddAddress页面
        this.$router.push({ name: "AddAddress" });
    },
  },
  // 获取映射关系的数据，如0-家
  mounted() {
    const self = this;
    this.$http.get("/api/labelMap").then(
      (res) => {
        // console.log(res)
        self.labelMap = res.data.data.data;
      }
      // err=>{}
    );
  },
};
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  background-color: rgba(235, 234, 233, 0.63);
  .header {
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    color: black;
    padding: 15px;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 2px rgba($color: #ccc, $alpha: 0.1);
    div {
      flex-grow: 1;
      h1 {
        margin: 0px;
        font-size: 1.5rem;
        font-weight: bolder;
      }
    }
  }
  .no-address {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      width: 35px;
      height: 35px;
    }
    .no-address-tips {
      font-size: 1.5rem;
      margin: 20px;
    }
  }
  .common-address {
    margin-top: 8px;
    padding: 20px;
    height: 70%;
    background-color: rgb(248, 247, 247);
    ul {
      li {
        border-bottom: 1px solid #ccc;
        padding-top: 20px;
      }
      li:last-child {
        border-bottom: none;
      }
    }
  }
  .btn {
    padding: 25px;
    text-align: center;
  }
}
</style>